import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,cardNumPartOf,namePartOf} from '../../utils/common'

import './index.less'
import './bank_card.less'

import icon_86 from "../../assets/img/icon_86.png";
import icon_87 from "../../assets/img/icon_87.png";
import none_card from "../../assets/img/none_card.png";

//我的银行卡
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    bankCard: []
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的银行卡' })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  componentDidShow(): void {
    this.getUserCards()
  }

  getUserCards() {
    let { userStore } = this.props.stores
    userStore.getUserCards({
      callback: res => {
        let resArr = toJS(res)
        if(resArr){
          this.setState({
              bankCard: resArr.items
          })
        }
      }
    })
  }
  // 删除银行卡
  onDelete(id: number){
    console.error(id)
    if(!id){ getRuntime().showToast('参数错误~') }
    let { userStore } = this.props.stores
    getRuntime().showModal('你确定要删除该银行吗？','',() => {
      userStore.removeUserCard({
        id,
        callback: () => {
          this.getUserCards()
          getRuntime().showToast('删除银行卡成功~')
        }
      })
    })
  }

  render() {
    let {bankCard} = this.state
    console.log(bankCard)
    return (
      <View>
        {bankCard.length > 0 &&
        <View className='my-my_card'>
            <View className='list-22'>
              {
                bankCard.map(item => {
                 return(
                   <View className='list-22-item' key={item.id}>
                     <Image src={icon_86} className='img' />
                     <View className='info'>
                       <View className='list-title'>{item.bankName}</View>
                       <View className='list-desc'>储蓄卡 {namePartOf(item.cardName)}</View>
                       <View className='card-no'>{cardNumPartOf(item.cardNumber)}</View>
                     </View>
                     <Image src={icon_87} className='r' onClick={this.onDelete.bind(this, item.id)} />
                   </View>
                 )
                })
              }
            </View>
        </View>
        }
        {bankCard.length <= 0 &&
          <View className='my-card_none'>
              <View className='none-info'>
                  <Image className='none-icon' src={none_card} />
                  <Text className='none-title list-desc'>还没有添加银行卡哦~</Text>
              </View>
          </View>
        }
        <View className='footer-block' />
        <View className='page-submit' onClick={this.handelRouter.bind(this, '/pages/user/bank_card_add')}>+ 添加银行卡</View>
      </View>
    )
  }
}

export default Company
